<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item :label="$t('startDate')">
        <el-date-picker
          v-model="startDate"
          type="datetime"
          :placeholder="$t('startDate')"
          align="right"
          :picker-options="pickerOptions1"
          value-format="timestamp"
        />
      </el-form-item>
      <el-form-item :label="$t('endDate')">
        <el-date-picker
          v-model="endDate"
          type="datetime"
          :placeholder="$t('endDate')"
          align="right"
          :picker-options="pickerOptions1"
          value-format="timestamp"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getUserDoList">{{ $t('search') }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          v-show="mCheck"
          icon="el-icon-delete"
          type="danger"
          circle
          @click="mDel"
        >{{ $t('delete') }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-timeline>
      <el-timeline-item
        v-for="(item,index) in userDoLists"
        :key="index"
        :timestamp="formatDate(item.updateDate)"
        placement="top"
      >
        <el-card>
          <p>{{ item.userDo }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <div style="text-align: right;margin: 15px 0">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { cancelNotice, formatDate } from '@/util/common'
import { deleteUserDone, deleteUserDoneList, pageGetUserDone } from '@/api/auth/authUserDoneApi'
import { getPageSize, setPageSize } from '@/util/storage'

export default {
  name: 'UserDone',
  data() {
    return {
      userDoLists: [],
      iclass: 0,
      currentPage: 1,
      total: 0,
      pageSize: getPageSize(),
      mCheck: false,
      mList: [],
      startDate: null,
      endDate: null,
      pickerOptions1: {
        shortcuts: [
          {
            text: this.$t('today'),
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: this.$t('today'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: this.$t('a') + this.$t('week') + this.$t('ago'),
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      }
    }
  },
  mounted() {
    const timestamp = new Date().getTime()
    this.startDate = timestamp - 7 * 24 * 60 * 60 * 1000
    this.endDate = timestamp + 4 * 60 * 60 * 1000
    this.getUserDoList()
  },
  methods: {
    formatDate(time) {
      return formatDate(this, time)
    },
    handleSelectionChange(val) {
      const mList = []
      val.forEach(function(row) {
        mList.push(row.doneId)
      })
      this.mList = mList
      if (mList.length > 0) {
        this.mCheck = true
      } else {
        this.mCheck = false
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.getUserDoList()
    },
    handleCurrentChange(item) {
      this.currentPage = item
      this.getUserDoList()
    },
    mDel() {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteUserDoneList({
            idList: that.mList
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.getUserDoList()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    del(index) {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteUserDone({
            doneId: index.doneId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.getUserDoList()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    getUserDoList() {
      pageGetUserDone({
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        startDate: Math.round(this.startDate / 1000),
        endDate: Math.round(this.endDate / 1000)
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.total = data.total
          const userDoLists = data.data
          for (let i = 0; i < userDoLists.length; i++) {
            let done = ''
            for (const doStr of userDoLists[i].userDo.split(' ')) {
              done = done + ' ' + this.$t(doStr)
            }
            userDoLists[i].userDo = done
          }

          this.userDoLists = userDoLists
        }
      })
    }
  }
}
</script>
